<template>
  <div class="hello">
    <h1>弹框测试</h1>
    <div>
      <button @click="opdialog">点我出现弹框</button>
      <div id="dom">我是dom元素</div>
    </div>
  </div>
</template>

<script>
import testContent from "./testContent";
export default {
  name: "HelloWorld",
  props: ["subData"],
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    opdialog() {
      this.$layer.open({
        title: "我是动态创建的" + this.count++,
        hasHead: true,
        customHead: null,
        content: testContent,
        hasMin: true, //是否有最小化按钮
        hasMax: true, //是否有最大化按钮
        move: true,
        shade: false,
        // minWidth: 100,
        // minHight: 20,
        bottomOff: 200,
        leftOff: 200,
        location: {},
        area: {
          //弹框大小
          height: "400px",
          width: "400px",
        },
        subData:"我是外部传入参数",
        multiple:true,
        blank:true,
        mixin:{
        created() {
              console.log("layer----mixin");
           },
        },
        theme:"red",
        success:()=>console.log("回调开始...success"),
        cancel:()=>console.log("回调开始...cancel"),
        minBack:()=>console.log("回调开始...minBack"),
        maxBack:()=>console.log("回调开始...maxBack"),
        restore:()=>console.log("回调开始...restore"),
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
